<template>
  <div id="wrap">
    <div class="wrapitem"></div>
    <div class="wrapitem" style="flex: 0.5;">
      <p class="cn1">前言 PREFACE</p>
    </div>
    <div class="wrapitem-content">
      <div class="wrapitem-content-item">
        <p class="cn2">
          天津依河而生，向海而兴。天津，是一座有故事的城市，发祥于三岔河口，得名于天子渡口，历史悠久，文化璀璨；天津是一座有魅力的城市，中西合璧，古今交融的独特风貌令人流连忘返；天津更是一座充满时代活力的伟大城市，京津冀协同发展、“一带一路”建设和构建新发展格局等重大战略机遇相互叠加，得天独厚的区位优势、联通内外的港口优势、基础雄厚的产业优势、人才富集的科教优势、改革开放的先行优势、底蕴深厚的文化优势，正加快转化为高质量发展的强大动能。
        </p>
        <p class="cn2">
          天津市贸促会自牵头成立天津市服务外资企业工作专班以来，联合各成员单位，上下联动，横向联通，合力推动解决外资企业诸多诉求，为优化外资发展环境作出了积极贡献。为持续做好外资企业服务，专班深入贯彻落实中国贸促会外资专班“三个转向”工作要求和市委关于经济工作的一系列决策部署，紧密围绕市委、市政府“十项行动”，主动作为、创新工作，向全市16个行政区和有关委办局征集招商材料和服务外资企业发展的相关政策，汇总编制成“天津外商投资环境及政策指引”材料，积极宣传推介天津良好的营商环境及外资政策，推动活力天津，走向世界。
        </p>
        <div class="luokuan">
          <p class="cn3" style="margin: 0;margin-right: 1rem;">
            天津市服务外资企业工作专班
          </p>
          <p class="cn2 just">
            <span>联系人:周先生、黄女士</span>
            <br />
            <span>电话:+86-022-23301333</span>
            <br />
            <span>+86-022-23300140 （24小时）</span>
            <br />
            <span>邮箱: sqzb@ccpittj.org</span>
          </p>
        </div>
      </div>
      <div class="wrapitem-content-item">
        <p class="en2">
          Tianjin, a city with stories, is closely tied to rivers and the Bohai Sea. Originating from Sanchahekou, the
          name of Tianjin means the ferry where the emperor passed. It has a long history with a splendid culture.
          Tianjin is a charming city with integrated ancient and modern cultures, forming a distinctive feature that makes
          visitors unforgettable. It is endowed with unique location, global connected port and advantages of talent and
          education,
          reform and opening up, and profound culture. Overlapping by significant strategies and opportunities in building
          new development paradigm such as Coordinated Development of Beijing-Tianjin-Hebei Region and the Belt and Road,
          Tianjin, a modern and
          dynamic metropolis, is accelerating its path to powerful momentum for high quality development.
        </p>
        <p class="en2">
          Since the establishment of the Service Task Force of Tianjin for Foreign-funded Enterprises, which was initiated
          by CCPIT Tianjin, it has been committed to solving appeals of foreign-funded enterprises, allying with other
          members of the task force to
          make a contribution to the improvement of foreign investment environment. In order to provide superior service
          to foreign-funded enterprises unremittingly, the task force has been implementing “Three Transitions” which was
          requested by the task force
          of CCPIT and a series of decisions regarding economic development made by Tianjin Municipality. Focusing on the
          “Ten Actions” which was put forward by CPC Tianjin Municipal Committee and Tianjin Municipal People’s
          Government, the task force did its job
          proactively and innovatively by collecting policies on foreign investment promotion and service from 16
          districts and related departments. The release of “ Guidelines On Tianjin Foreign Investment Environment and
          Policies” is aiming to publicize
          Tianjin’s favorable business environment and foreign investment policies so as to bring vigorous Tianjin to the
          world.
        </p>
        <div class="luokuan">
          <p class="en3" style="margin: 0;;margin-right: 1rem;">
            Service Task Force of <br />
            Tianjin for Foreign-funded Enterprises</p>
          <p class="en2 just" style="line-height: 2rem;">
            <span>Contact: Mr Zhou , Ms Huang</span>
            <br />
            <span>T e l: +86-022-23301333</span>
            <br />
            <span>+86-022-23300140 (24 hours)</span>
            <br />
            <span>E m a i l: sqzb@ccpittj.org</span>
          </p>
        </div>
      </div>
    </div>
    <div class="wrapitem">
      <div class="language">
        <router-link :to="{ path: '/home', query: { lang: 'zh' } }">进入地图<br />GO TO MAP</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      isShow: true,
    };
  },
  created() { },
  mounted() {
    // let that = this;
    // setTimeout(function () {
    //   // 需要延迟执行的语句
    //   that.isShow = true;
    // }, 1000);
    // setTimeout(function() {
    //     // 需要延迟执行的语句
    //     that.$router.replace('/home');
    //   }, 15000);
  },
  methods: {
    // afterEnter: function () {
    //   let that = this;
    //   that.$router.replace('/home');
    //   setTimeout(function() {
    //     // 需要延迟执行的语句
    //     that.$router.replace('/home');
    //   }, 1500);
    // },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fly-in-text {
  opacity: 0;
  /** 初始状态为不可见 */
  /* animation: fly-in 3s ease-in-out forwards; */
  animation: 5s fade-in forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@font-face {
  font-family: "PangMenZhengDaoCuShuTi";
  src: url("~@/assets/fonts/PangMenZhengDaoCuShuTi-2.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'pangmen';
  src: url('~@/assets/fonts/pangmen.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "AlimamaShuHeiTi";
  src: url("~@/assets/fonts/AlimamaShuHeiTi-Bold.otf");
  font-weight: normal;
  font-style: normal;
}

#wrap {
  background: url("~@/assets/img/back.png") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrapitem {
  flex: 1;
  text-align: center;
}

.wrapitem-content {
  flex: 3;
  flex-direction: row;
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: space-around;
  background: #11388a;
  /* opacity: 60%;
  background: linear-gradient(to bottom, #000000, #11388a); */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4));
  height: 100%;
}

.wrapitem-content-item {
  width: 45%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.just {
  text-indent: 0rem !important;
  text-align: justify;
  text-align-last: justify;
  /*兼容ie*/
  text-justify: distribute-all-lines;
  margin: 0 !important;
  margin-right: 1rem !important;
  text-justify: inter-word;
}

.just1 {
  text-align: justify;
  text-align-last: justify;
  /*兼容ie*/
  text-justify: distribute-all-lines;
}

.luokuan {
  text-align: right;
  display: inline-flex;
  height: 100%;
  justify-content: flex-end;
  align-items: flex-end;
  font-size: 1.5rem !important;
  flex-direction: column;
}

.cn1 {
  color: #ffffff;
  font-weight: bold;
  font-family: "AlimamaShuHeiTi";
  font-size: 2rem;
  margin: 0;
  text-shadow: 1px 1px 1rem black;
  letter-spacing: 1rem;
}

.en1 {
  color: #ffffff;
  font-weight: bold;
  font-family: "AlimamaShuHeiTi";
  font-size: 1.5rem;
  text-shadow: 1px 1px 1rem black;
}

.cn2 {
  color: #ffffff;
  font-family: "微软雅黑";
  font-size: 1rem;
  text-shadow: 1px 1px 1rem black;
  text-indent: 2rem;
  margin: 1rem;
  line-height: 2rem;
  word-break: break-all;
  line-break: anywhere;
}

.en2 {
  color: #ffffff;
  font-family: '微软雅黑';
  font-size: 1rem;
  text-shadow: 1px 1px 1rem black;
  /* text-indent: 2rem; */
  margin: 1rem;
  line-height: 1.1rem;
  word-break: break-all;
  line-break: anywhere;
}

.cn3 {
  color: #ffffff;
  font-family: "微软雅黑";
  font-weight: bold;
  font-size: 1.3rem;
  text-shadow: 1px 1px 1rem black;
  text-indent: 2rem;
  margin: 2rem;
  line-height: 2rem;
}

.en3 {
  color: #ffffff;
  font-family: '微软雅黑';
  font-weight: bold;
  font-size: 1.3rem;
  text-shadow: 1px 1px 1rem black;
  text-indent: 2rem;
  margin: 2rem;
  line-height: 1.5rem;
}

.language {
  height: 6rem;
  line-height: 3rem;
  color: white;
  display: flex;
  justify-content: center;
  padding-top: 1rem;
  padding-right: 1rem;
}

.language a {
  text-decoration: none;
  color: white;
  font-size: 1rem;
  flex-direction: row-reverse;
  display: block;
  width: 10rem;
  border-radius: 20px;
  border-style: solid;
  border-color: white;
  text-align: center;
  height: 5rem;
  line-height: 2.5rem;
  background: #ef9528;
  box-shadow: 1px 1px 1rem #ef9528;
}

.language a.selected {
  background: #ef7428;
  box-shadow: 1px 1px 1rem #ef7428;
}

.language a.en {
  margin-left: 1rem;
}
</style>
